import React from 'react'
import PropTypes from 'prop-types'
import TextField from '@material-ui/core/TextField'
import InputAdornment from '@material-ui/core/InputAdornment'
import { withStyles } from '@material-ui/core/styles'

const styles = theme => ({
    root: {
        margin: theme.spacing.unit / 4,
    },
})

class MUInput extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: this.props.defaultValue || '',
            dense: this.props.dense !== undefined && this.props.dense
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({value: nextProps.value})
    }

    handleKeyDown(e) {
        if (e.altKey) {
            if (e.key === 'ArrowLeft') {
                this.handlePreInput(e.target)
            }
            else if (e.key === 'ArrowRight') {
                this.handleNextInput(e.target)
            }
        }
        if (e.key === 'Backspace' && this.state.value !== undefined && this.state.value.length === 0) {
            this.handlePreInput(e.target)
        }
        else if (e.key === 'Enter') {
            if (this.props.required) {
                if (this.state.value !== undefined && this.state.value.length > 0)
                    this.handleNextInput(e.target)
            } else {
                this.handleNextInput(e.target)
            }
        }
    }

    handlePreInput(target) {
        const index = Array.prototype.indexOf.call(target.form, target)
        if (index > 0) {
            target.form.elements[index - 1].focus()
        }
    }

    handleNextInput(target) {
        const index = Array.prototype.indexOf.call(target.form, target)
        if (target.form.elements.length === index + 1 && this.props.onSubmit) {
            this.props.onSubmit()
        } else if (index + 1 < target.form.elements.length) {
            if (this.props.skip) {
                if (target.form.elements[index + this.props.skip + 1] === undefined) return this.props.onSubmit()
                target.form.elements[index + this.props.skip + 1].focus()
            } else {
                target.form.elements[index + 1].focus()
            }
        }
    }

    handleChange(e) {
        this.setState({ value: e.target.value })
        if (this.props.onChange) {
            this.props.onChange(e)
        }
    }

    render() {
        const { classes } = this.props
        return (
            <TextField
                required={this.props.required}
                label={this.props.label}
                InputLabelProps={{
                    shrink: true,
                }}
                inputProps={{
                    readOnly: this.props.readOnly,
                }}
                InputProps={{
                    endAdornment: <InputAdornment style={{marginTop: 16}} position="end">{this.props.postfix||''}</InputAdornment>
                }}
                className={classes.root}
                defaultValue={this.props.defaultValue}
                value={this.state.value}
                variant="filled"
                onChange={(e) => this.handleChange(e)}
                onKeyDown={(e) => this.handleKeyDown(e)}
                style={{
                    width: this.props.width,
                    height: this.state.dense ? 40 : 80,
                    fontSize: 8,
                }}
                multiline={this.props.multiline}
                autoFocus={this.props.autoFocus}
                // {...this.props}
            />
        )
    }
}

MUInput.propTypes = {
    classes: PropTypes.object.isRequired,
    theme: PropTypes.object.isRequired,
}

export default withStyles(styles, { withTheme: true })(MUInput)